<script setup lang="ts">
import { reactive } from 'vue'
import { useRoute, useRouter } from "vue-router"
import { useStore } from '../store'
import { get } from '../utils/request'
import XLSX, { utils } from 'xlsx'
import { dayjs } from 'element-plus'
const state = reactive({
  data: [],
  dict: {}
})

const router = useRouter()
const store = useStore()

const out = () => {
  let data = []
  let item = {}
  for (let i in state.data) {
    item = {
      '姓名': state.data[i]['name'],
      '性别': state.data[i]['gender'],
      '身份': state.data[i]['position'],
      '单位': state.data[i]['work'],
      '电话': state.data[i]['mobile'],
      '微信': state.data[i]['wx'],
      '填报时间': state.data[i]['editTime'],
    }
    // for(let j in state.data[i].items) {
    //   item['参与项目'+(j-0+1)] = state.data[i].items[j].substr(2,2) + '日 - ' + state.dict[state.data[i].items[j]].title
    // }

    for(let j in state.dict) {
      console.log(state.data[i].items.indexOf(state.dict[j].hash));
      
      if (state.data[i].items.indexOf(state.dict[j].hash) >= 0)
        item[state.dict[j]['title']] = '√'
      else
        item[state.dict[j]['title']] = undefined
    }

    data.push(item)
  }
  
  let wb = XLSX.utils.book_new()
  let sheet = XLSX.utils.json_to_sheet(data)
  XLSX.utils.book_append_sheet(wb, sheet, 'sheet1')
  XLSX.writeFile(wb, '日本嘉年华导出数据'+dayjs().format("YYYYMMDDHHmmss") + '.xlsx')
}

const init = () => {
  get('carnivalBase', {admin: 1}).then(res => {
    for (let i in res.data.dict) {
      state.dict[i] = res.data.dict[i]
    }
    for (let i in res.data.data) {
      state.data.push(res.data.data[i])
    }
    console.log(state.dict);
    

  }).catch(() => {
    alert('出错了')
  })
}

init()
document.title = "日本嘉年华"
</script>

<template>
<div>
  <el-button @click="out">导出</el-button>
  <el-table :data="state.data" style="width: 100%">
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="gender" label="性别" />
    <el-table-column prop="position" label="身份" />
    <el-table-column prop="work" label="单位" />
    <el-table-column prop="mobile" label="电话" />
    <el-table-column prop="items" label="报名项目" width="400">
      <template #default="scope">
        <el-tag v-for="item in scope.row.items" :key="scope.row['id']+item" type="primary">
          {{ item.substr(0, 4) }} - 
          {{ state.dict[item].title }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="wx" label="微信号" />
  </el-table>
</div>
</template>